import { observer } from 'mobx-react-lite';
import systemStore from '@/stores/SystemStore';
import Navbar from '@/components/Navbar';
import { Text, View } from '@tarojs/components';
import './index.less';
import { ImagePreview, Rate } from '@nutui/nutui-react-taro';
import ImageComp from '@/components/Image';
import { useEffect, useState } from 'react';
import ImageConstant from '@/constant/ImageConstant';
import { getCurrentInstance } from '@tarojs/taro';
import { CommentEntity } from '@/entities/CommentEntity';
import HouseCommentBusiness from '@/business/HouseCommentBusiness';
import EmptyComp from '@/components/Empty';

function HouseAllComment() {
  const routerParam = getCurrentInstance().router?.params;
  const [currentImagePreview, setCurrentImagePreview] = useState<Array<{ src: string }>>();
  const [imagePreviewVisible, setImagePreviewVisible] = useState(false);
  const [previewPoint, setPreviewPoint] = useState(1);
  const [allCommentList, setAllCommentList] = useState<CommentEntity.IComment[]>();
  /**
   * 查看图片
   * @param images
   * @param idx
   */
  const toLookImage = (images: string[], idx: number) => {
    setCurrentImagePreview(images.map((src: string) => ({src: `${ ImageConstant.SERVER_ROOT }/${ src }`})));
    setPreviewPoint(idx + 1);
    setImagePreviewVisible(true);
  };

  const getHouseAllComment = async () => {
    const res: any = await HouseCommentBusiness.getCommentByHouseId(Number(routerParam?.houseId!));
    if (routerParam?.leaseId && res instanceof Array) {
      let currentTenantCommentIndex: number = -1;
      res.forEach((r, idx: number) => {
        if (r.leaseId == routerParam?.leaseId) {
          currentTenantCommentIndex = idx;
        }
      });
      const currentTenantComment = JSON.parse(
        JSON.stringify(
          res.find(r => r.leaseId == routerParam?.leaseId)
        )
      );
      res.splice(currentTenantCommentIndex, 1);
      res.unshift(currentTenantComment);
      setAllCommentList(res);
    } else {
      setAllCommentList(res);
    }
  };

  useEffect(() => {
    getHouseAllComment();
  }, []);

  return (
    <Navbar
      title={ routerParam?.houseName }
      mode='back'
      bgColor='var(--mini-first)'
    >
      <View
        className='house-all-comment-container'
        style={ {height: systemStore.haveNavbarNotTabbarHeight} }
      >
        {
          allCommentList?.length ?
            allCommentList?.map((comment: CommentEntity.IComment, idx: number) => {
              return (
                <View key={ idx }>
                  <View className='comment-card'>
                    <View className='comment-text'>
                      <Text className='txt'>{ comment.comment }</Text>
                    </View>
                    <View className='item'>
                      <Text className='text'>房屋评分</Text>
                      <Rate readOnly={ true } defaultValue={ comment.houseScore }/>
                    </View>
                    <View className='item'>
                      <Text className='text'>房东评分</Text>
                      <Rate readOnly={ true } defaultValue={ comment.landlordScore }/>
                    </View>
                    <View className='item'>
                      {
                        JSON.parse(comment.image)?.map((url: string, i: number) => {
                          return <ImageComp
                            className='img'
                            src={ url }
                            onClick={ () => toLookImage(JSON.parse(comment.image), i) }
                            key={ i }
                          />;
                        })
                      }
                    </View>
                  </View>
                  {
                    routerParam?.tenantId && idx === 0 ?
                      <View className='tip-split'>
                        以下是房屋的其他评论
                      </View> : null
                  }
                </View>

              );
            }) : <EmptyComp text='该房屋暂无评论'/>
        }
        <ImagePreview
          images={ currentImagePreview }
          visible={ imagePreviewVisible }
          defaultValue={ previewPoint }
          onClose={ () => setImagePreviewVisible(false) }
        />
      </View>
    </Navbar>
  );
}

export default observer(HouseAllComment);